<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="vue.js"></script>
    <title>Document</title>
    <style>
        table {
            width: 600px;
            height: 60px;
            border: 1px solid black;
        }

        table th {
            width: 150px;
            height: 50px;
            border: 1px solid red;
        }

        td {
            width: 150px;
            height: 50px;
            text-align: center;

            border: 1px solid blue;
        }

        div {
            width: 300px;
            height: 200px;
            margin-top: 30px;
            border: 1px solid black;
        }

        button {
            background-color: red;
            border: none;
        }
    </style>
</head>

<body>
    <main id="app">
        <table>
            <tr>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>商品数量</th>
                <th>操作</th>
            </tr>
            <tr v-for='(Food ,index) in foodList'>
                <td>{{Food.name}}</td>
                <td>{{Food.price}}</td>
                <td>
             <button @click='Food.quantity--'>-</button> {{Food.quantity}} 
                        <button @click='Food.quantity++'>+</button>
            </td>
                <td></td>
            </tr>
        </table>
        <br><br>
       

        <div>
            <h1>清单</h1>
            <h3>商品总价:</h3>
            <h3>收件人:</h3>
            <h3>收货地址:</h3>
        </div>
    </main>

    <script id="first" type="text/html">
        <input  type="text">
        <input type="text">
      
    </script>
    <script>
        Vue.component('first-com', {
          template:'#first',

        })
        var vue = new Vue({
            el: '#app',
            data: {
                foodList: [
                    {
                        name: '辣条',
                        price: 1,
                        quantity: 5
                    }, {
                        name: '泡椒鸡爪',
                        price: 1.5,
                        quantity: 5
                    },
                    {
                        name: '巧克力',
                        price: 3,
                        quantity: 0
                    }
                ]
            }
        })




    </script>
</body>

</html>